<template>
  <div>
    <div class="top">
      <el-input class="rolename" v-model="role.param.rolename" placeholder="请输入角色名称"></el-input>
      <el-button type="primary" @click="initData" icon="el-icon-search" v-show="this.hasPermission('role:query')">查询</el-button>
      <el-button type="danger" @click="deletes" icon="el-icon-delete" :disabled="this.multipleSelection.length==0" v-show="this.hasPermission('role:delete')">批量删除</el-button>
    </div>
    <div style="margin-top: 10px;">
      <template>
        <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            :data="tableData"
            style="width: 100%"
            border
            @selection-change="handleSelectionChange"
            max-height="450">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="url"
              label="请求路径"
          >
          </el-table-column>
          <el-table-column
              prop="visit"
              label="访问时间ms"
          >
          </el-table-column>
          <el-table-column
              prop="visitDate"
              label="访问时间"
          >
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="150">
            <template slot-scope="scope">

              <el-button class="el-icon-delete" @click="deleteById(row)"  type="warning" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div style="text-align: right">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="role.pageNumber"
            :page-sizes="[20,100,200,300]"
            :page-size="role.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "ActionLog",
  data(){
    return {
      role:{
        param:{
          url:''
        },
        pageNumber:1,
        pageSize:20,
        total:0
      },
      curRoleId:0,
      form:{
        rolename:'',
        id:0,
        status:'1'
      },
      tableData:[],
      dialogFormVisible:false,
      loading:true,
      title:'',
      multipleSelection: []
    }
  },
  mounted() {
    this.initData();
  },
  methods: {

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.role.pageSize=parseInt(val);
      this.initData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.role.pageNumber = parseInt(val);
      this.initData();
    },
    initData(){

      this.postRequest('/log/action/log',this.role).then(resp=>{
        if(resp.success){
          this.tableData = resp.result.list;
          this.role.total=resp.result.total;

        }
        this.loading = false

      })
    },
    handleSelectionChange(val){

      this.multipleSelection = val

    },
    deleteById(row){
      this.$confirm('此操作将永久删除该日志, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/log/action/delete?ids='+row.id).then(resp=>{
          if(resp.success){
            this.initData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    deletes(){
      this.$confirm('此操作将永久删除'+this.multipleSelection.length+'个日志, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids='?';
        this.multipleSelection.forEach(item=>{
          ids+='ids='+item.id+'&';
        });
        this.deleteRequest('/log/action/delete'+ids).then(resp=>{
          if(resp.success){
            this.initData()
          }
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    }



  }
}
</script>

<style scoped>
.top{
  display: flex;
}
.rolename{
  width: 200px;
  margin-right: 10px;
}
</style>